<template>
	<div style="border: 2px solid black;padding: 30px;">
		<el-form ref="form" :model="form" label-width="80px">
			<el-form-item label="title"><el-input v-model="form.title"></el-input></el-form-item>
			<el-form-item label="author"><el-input v-model="form.author"></el-input></el-form-item>
			<el-form-item label="pageviews"><el-input-number v-model="form.pageviews" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number></el-form-item>
			<el-form-item label="time" prop="time">
				<el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>
			</el-form-item>
			<el-form-item label="status">
				<el-select v-model="form.status" placeholder="请选择状态">
					<el-option label="已删除" value="0"></el-option>
					<el-option label="已发布" value="1"></el-option>
					<el-option label="已领养" value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">立即创建</el-button>
				<el-button>取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { chart_add } from '../api/insert';
export default {
	data() {
		return {
			form: {
				title: '',
				author: '',
				pageviews: '',
				status: '',
				time: ''
			}
		};
	},
	methods: {
		onSubmit() {
			console.log(this.form);
			var obj = this.form;
			console.log(obj)
			chart_add(this.$qs.stringify(obj))
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					console.log(err);
				});
		},
		handleChange(value) {
			console.log(value);
		}
	}
};
</script>
